<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5 page</title>
<style type="text/css">
table#dd { width: 6em; height: 6em; table-layout: fixed; }
table#dd tr { height: 3em; }
</style>
<script>
    function dragOver(ev) {
        ev.preventDefault();
    }

    function dragStart(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
</script>
</head>
<body>
    <h3>Drag &amp; drop</h3>
    <table border="1" id="dd">
        <tr>
            <td ondragover="dragOver(event)" ondrop="drop(event)">
                <img id="img" alt="image" src="content/bullet.png" draggable="true" ondragstart="dragStart(event)">
            </td>
            <td ondragover="dragOver(event)" ondrop="drop(event)" />
        </tr>
        <tr>
        <td ondragover="dragOver(event)" ondrop="drop(event)" />
        <td ondragover="dragOver(event)" ondrop="drop(event)" />
        </tr>
    </table>
    <h3>Input</h3>
    <form action="html4.html" enctype="application/x-www-form-urlencoded" method="get" autocomplete="off">
    <table>
    <tr>
        <td><input list="browsers" placeholder="Datalist" required /></td>
        <td><input type="email" placeholder="Email" required></td>
    </tr>
    <tr>
        <td><input type="url" placeholder="URL" required /></td>
        <td><input type="tel" placeholder="Telephone" required /></td>
    </tr>
    <tr>
        <td><input type="date" min="2013-01-01" max="2014-12-31" placeholder="Date" required /></td>
        <td><input type="time" min="09:00" max="18:00" placeholder="Time" required /></td>
    </tr>
    <tr>
    <td>
        <input type="datetime" min="2013-01-01 09:00" max="2014-12-31 18:00" placeholder="Date Time" required /></td>
        <td><input type="datetime-local" min="2013-01-01 09:00" max="2014-12-31 18:00" placeholder="Date Time Local" required /></td>
    </tr>
    <tr>
        <td><input type="month" min="2013-01" max="2014-12" placeholder="Month" required /></td>
        <td><input type="week" min="2013-W01" max="2013-W10" placeholder="Week" required /></td>
    </tr>
    <tr>
        <td>
        <input type="number" min="-10" max="10" placeholder="Number" required />
        <input type="color" placeholder="color" required />
        </td>
        <td><input type="range" min="-1" max="10" title="Range" placeholder="Range" required /></td>
    </tr>
    <tr>
        <td colspan="2">
        <input type="search"  pattern=".{3,}" placeholder="search" required />
        <input type="file" title="Multiple Files" multiple required />
        <input type="submit" formaction="html5.html" formenctype="multipart/form-data" formmethod="post" formtarget="_blank" />
        </td>
    </tr>
    </table>
    </form>

    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
</body>
</html>
